<div class="ama-project-creator">
    <mat-drawer-container class="ama-project-creator-drawer">
        <mat-drawer mode="side" opened>
            <mat-selection-list [multiple]="false" #filters>
                <mat-list-option role="listitem" class="ama-project-creator-drawer-action" selected [value]="ActionTypes.CREATE_ACTION"
                                 data-automation-id="ama-project-creator-create-section">
                    <button mat-button class="ama-project-creator-drawer-action-button">
                        <mat-icon class="ama-project-creator-drawer-action-icon" aria-hidden="false"
                            aria-label="Create new element">add</mat-icon>
                        {{'PROJECT_EDITOR.NEW_MENU.CREATE' | translate }}
                    </button>
                </mat-list-option>
                <mat-list-option role="listitem" class="ama-project-creator-drawer-action" [value]="ActionTypes.UPLOAD_ACTION"
                                 data-automation-id="ama-project-creator-upload-section">
                    <button mat-button class="ama-project-creator-drawer-action-button">
                        <mat-icon class="ama-project-creator-drawer-action-icon" aria-hidden="false"
                            aria-label="Create new element">file_upload</mat-icon>
                        {{'PROJECT_EDITOR.NEW_MENU.UPLOAD' | translate }}
                    </button>
                </mat-list-option>
                <mat-list-option role="listitem" class="ama-project-creator-drawer-action" [value]="ActionTypes.IMPORT_ACTION"
                                 data-automation-id="ama-project-creator-import-section">
                    <button mat-button class="ama-project-creator-drawer-action-button">
                        <mat-icon class="ama-project-creator-drawer-action-icon" aria-hidden="false"
                            aria-label="Create new element">swap_vert</mat-icon>
                        {{'PROJECT_EDITOR.NEW_MENU.IMPORT' | translate }}
                    </button>
                </mat-list-option>
            </mat-selection-list>
        </mat-drawer>
        <mat-drawer-content class="ama-project-creator-main-content">

            <ng-container [ngSwitch]="filters.selectedOptions.selected[0]?.value">
                <ng-container *ngSwitchCase="ActionTypes.CREATE_ACTION" [ngTemplateOutlet]="createList"></ng-container>
                <ng-container *ngSwitchCase="ActionTypes.UPLOAD_ACTION" [ngTemplateOutlet]="uploadList"></ng-container>
                <ng-container *ngSwitchCase="ActionTypes.IMPORT_ACTION" [ngTemplateOutlet]="importList"></ng-container>
            </ng-container>

        </mat-drawer-content>
    </mat-drawer-container>
</div>

<ng-template #importList>
    <ama-project-import-select-list (importSelected)="onExecute()" [projectId]="(selectedProjectId$ | async)">
    </ama-project-import-select-list>
</ng-template>

<ng-template #createList>
    <mat-selection-list [multiple]="false" class="ama-project-creator-filter-list">
        <ng-container *ngFor="let creator of creators">
            <mat-list-option *ngIf="isAllowed(creator, ActionTypes.CREATE_ACTION)"
                [attr.data-automation-id]="'app-navigation-create-' + getKey(creator)" [value]="creator.type"
                (click)="onCreateElementClicked(creator)"
                class="ama-project-creator-filter-list-item">
                <mat-icon class="ama-project-creator-filter-icon">
                    {{ creator.icon }}
                </mat-icon>
                <span class="ama-project-creator-filter-name">{{ creator.name | translate }}</span>
            </mat-list-option>
        </ng-container>
    </mat-selection-list>
</ng-template>

<ng-template #uploadList>
    <mat-selection-list class="ama-project-upload-button-list">
        <ng-container *ngFor="let creator of creators">
            <ama-upload-file-button role="option" class="mat-list-option ama-project-upload-button-list-main" *ngIf="isAllowed(creator, ActionTypes.UPLOAD_ACTION)"
                [attr.data-automation-id]="'app-navigation-upload-' + getKey(creator)" [type]="getKey(creator)"
                [projectId]="selectedProjectId$ | async"
                (fileUploaded)="onExecute()">
                <mat-icon class="ama-project-upload-button-list-filter-icon">
                    {{ creator.icon }}
                </mat-icon>
                <span class="ama-project-upload-button-list-filter-name">{{ creator.name | translate }}</span>
            </ama-upload-file-button>
        </ng-container>
    </mat-selection-list>
</ng-template>
